<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
  <title>萌宝购物</title>
  <link rel="stylesheet" href="css/core.css">
  <link rel="stylesheet" href="css/icon.css">
  <link rel="stylesheet" href="css/home.css">
  <link rel="stylesheet" href="font/iconfont.css">
  <style>
    .m-cell {background-color:#FFF;position:relative;z-index:1;margin-bottom:.35rem;height:3rem;line-height:3rem;}
    ::-webkit-input-placeholder {color:#888;}
    :-moz-placeholder {color:#888;}
    ::-moz-placeholder {color:#888;}
    :-ms-input-placeholder {color:#888;}
	</style>
</head>

<body style="background:#f5f5f5">

  <header class="aui-header-default aui-header-fixed ">
    <a href="javascript:history.back(-1)" class="aui-header-item">
      <i class="aui-icon aui-icon-back"></i>
    </a>
    <div class="aui-header-center aui-header-center-clear">
      <div class="aui-header-center-logo">
        <div class="">新建地址</div>
      </div>
    </div>
  </header>

  <section class="aui-myOrder-content">
    <div class="aui-prompt"><i class="aui-icon aui-prompt-sm"></i>填写您的地址信息</div>
    <div class="aui-Address-box">
      <p>
        <input class="aui-Address-box-input" type="text" placeholder="收货人姓名">
      </p>
      <p>
        <input class="aui-Address-box-input" type="text" placeholder="手机号码">
      </p>
      <p>
        <input class="aui-Address-box-input" type="text" readonly id="J_Address" placeholder="所在地区">
      </p>
      <p>
        <textarea class="aui-Address-box-text" placeholder="街道， 小区门牌等详细地址" rows="3"></textarea>
      </p>
    </div>
    <div class="aui-out">
      <a href="#" style="color:#fff">保存并使用</a>
    </div>
  </section>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/aui.js"></script>
  <script type="text/javascript" src="js/city.js"></script>
  <script>
    //  默认调用    
    !function () {
      var $target = $('#J_Address');

      $target.citySelect();

      $target.on('click', function (event) {
        event.stopPropagation();
        $target.citySelect('open');
      });

      $target.on('done.ydui.cityselect', function (ret) {
        $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
      });
    }();
  </script>

</body>

</html>